<template>
    <div>
        <div class="container">
            <h1>包裹拒签</h1>
            <el-divider></el-divider>
            <el-table
                :data="expressInfo.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                v-loading="loading"
                style="width: 100%"
                stripe
            >
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="快递单号" prop="express_id" width="150"> </el-table-column>
                <el-table-column label="快递公司" prop="company_name" width="80"> </el-table-column>
                <el-table-column label="创建时间" prop="time" sortable width="150"> </el-table-column>
                <el-table-column label="发件人" prop="from_name" width="60"> </el-table-column>
                <el-table-column label="发件人电话" prop="from_tel" width="120"> </el-table-column>
                <el-table-column label="发件人地址" prop="from_address" width="280"> </el-table-column>
                <el-table-column label="收件人" prop="to_name"  width="60"> </el-table-column>
                <el-table-column label="收件人电话" prop="to_tel" width="120"> </el-table-column>
                <el-table-column label="收件人地址" prop="to_address" width="280"> </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button @click="refused(scope.$index, scope.row)" type="text" size="small">拒签</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-divider></el-divider>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%; margin-top: 20px"
            ></el-pagination>
             <!-- <el-divider></el-divider> -->
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
            loading: false,
            //总数
            length: 0,
            //初始页
            currentPage: 1,
            pagesize: 10,
            //初始页大小
            value: null,
           
            param: {
                to_name: ''
            },
            expressInfo: []
        };
    },
    // 方法
    methods: {
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        //包裹拒签
        refused(index, row) {
            this.$confirm('该操作会将您的包裹拒签, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    const _this = this;
                    console.log(row);
                    this.$axios({
                        method: 'POST',
                        url: 'express/addExpressInfo5',
                        data: row,
                        headers: { 'Content-Type': 'application/json' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '拒签成功!'
                                });
                                // _this.$router.go(0);
                            } else {
                                _this.$message('您没有可以拒签的包裹！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
        },
        //初始页面
        create_met() {
            this.loading = true;
            let param = new URLSearchParams();
            param.append('to_name', localStorage.getItem('to_name'));
            param.append('state', 1);
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/getUserExpressInfoByName',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.expressInfo = res.data.result;
                        _this.length = _this.expressInfo.length;
                    } else {
                        _this.loading = false;
                        _this.$message('您没有可以拒签的包裹！');
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.create_met();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>